﻿@using Microsoft.AspNetCore.Mvc.Localization
@using Skoruba.IdentityServer4.Admin.BusinessLogic.Shared.Dtos.Common
@using Skoruba.IdentityServer4.Admin.UI.Configuration.Constants
@model Skoruba.IdentityServer4.Admin.BusinessLogic.Dtos.Configuration.ApiScopeDto
@inject IViewLocalizer Localizer

@{
	ViewBag.Title = Localizer["PageTitle"];
	Layout = "_Layout";
}

<div class="row">
	<div class="col-12">
		<nav aria-label="breadcrumb">
			<ol class="breadcrumb">

				@if (Model.Id != 0)
				{
					<li class="breadcrumb-item"><a asp-area="@CommonConsts.AdminUIArea" asp-controller="Configuration" asp-action="ApiScopes">@Localizer["NavigationApiScopes"]</a></li>
					<li class="breadcrumb-item active" aria-current="page">@Model.Name</li>
				}
				else
				{
				    <li class="breadcrumb-item"><a asp-area="@CommonConsts.AdminUIArea" asp-controller="Configuration" asp-action="ApiScopes">@Localizer["NavigationApiScopes"]</a></li>
				}
			</ol>
		</nav>
	</div>

	<div class="col-12">
		<h2>@Localizer["PanelTitle"]</h2>
	</div>
</div>

<form asp-area="@CommonConsts.AdminUIArea" asp-action="ApiScope" id="api-scope-form" method="post">

	<div asp-validation-summary="All" class="text-danger"></div>

	<!--Hidden -->
	<input type="hidden" asp-for="Id" />
	
	<div class="card mt-3">
		<h5 class="card-header">@Localizer["PanelTitle"]</h5>
		<div class="card-body">
			<!--Input - text -->
			<div class="form-group row">
				<label asp-for="Name" class="col-sm-3 col-form-label">
					@await Html.PartialAsync("ApiResource/Section/Label", "Name")
				</label>
				<div class="col-sm-9">
					<input type="text" required class="form-control" asp-for="Name">
					<span asp-validation-for="Name" class="text-danger"></span>
				</div>
			</div>

			<!--Input - text -->
			<div class="form-group row">
				<label asp-for="DisplayName" class="col-sm-3 col-form-label">
					@await Html.PartialAsync("ApiResource/Section/Label", "DisplayName")
				</label>
				<div class="col-sm-9">
					<input type="text" class="form-control" asp-for="DisplayName">
				</div>
			</div>

			<!--Input - text -->
			<div class="form-group row">
				<label asp-for="Description" class="col-sm-3 col-form-label">
					@await Html.PartialAsync("ApiResource/Section/Label", "Description")
				</label>
				<div class="col-sm-9">
					<input type="text" class="form-control" asp-for="Description">
				</div>
			</div>
			
            <!--Checkbox-->
            <div class="form-group row">
                <label asp-for="Enabled" class="col-sm-3 col-form-label">
                    @await Html.PartialAsync("IdentityResource/Section/Label", "Enabled")
                </label>
                <div class="col-sm-9">
                    <toggle-button>
                        <input asp-for="Enabled" type="checkbox">
                    </toggle-button>
                </div>
            </div>
			
            <!--Checkbox-->
            <div class="form-group row">
                <label asp-for="ShowInDiscoveryDocument" class="col-sm-3 col-form-label">
                    @await Html.PartialAsync("IdentityResource/Section/Label", "ShowInDiscoveryDocument")
                </label>
                <div class="col-sm-9">
                    <toggle-button>
                        <input asp-for="ShowInDiscoveryDocument" type="checkbox">
                    </toggle-button>
                </div>
            </div>

            <!--Checkbox-->
			<div class="form-group row">
				<label asp-for="Required" class="col-sm-3 col-form-label">
					@await Html.PartialAsync("IdentityResource/Section/Label", "Required")
				</label>
				<div class="col-sm-9">
					<toggle-button>
						<input asp-for="Required" type="checkbox">
					</toggle-button>
				</div>
			</div>

			<!--Checkbox-->
            <div class="form-group row">
                <label asp-for="Emphasize" class="col-sm-3 col-form-label">
                    @await Html.PartialAsync("IdentityResource/Section/Label", "Emphasize")
                </label>
                <div class="col-sm-9">
                    <toggle-button>
                        <input asp-for="Emphasize" type="checkbox">
                    </toggle-button>
                </div>
            </div>
			
            @if (Model.Id != 0)
            {
               <!--Button-->
                <div class="form-group row">
                    <label class="col-sm-3 col-form-label">
                        @await Html.PartialAsync("ApiResource/Section/Label", "Properties")
                    </label>
                    <div class="col-sm-9">
                        <a asp-area="@CommonConsts.AdminUIArea" asp-action="ApiScopeProperties" asp-route-id="@Model.Id" class="btn btn-primary">@Localizer["ManageApiScopeProperties"]</a>
                    </div>
                </div>
            }

            <!--Select with tags-->
			<div class="form-group row">
				<label asp-for="UserClaims" class="col-sm-3 col-form-label">
					@await Html.PartialAsync("ApiResource/Section/Label", "UserClaims")
				</label>
				<div class="col-sm-9">
					<picker id="UserClaimsItems" multiple-select="true" min-search-text="2"
							selected-items="@Model.UserClaims" url="@Url.Action("SearchClaims","Configuration")?claim"
					        search-input-placeholder="@Localizer["PickerSearchItemPlaceholder"].Value"
					        selected-items-title="@Localizer["PickerSelectedItemsTitle"].Value" 
					        search-result-title="@Localizer["PickerSearchResultTitle"].Value"
					        suggested-items-title="@Localizer["PickerSuggestedItemsTitle"].Value" 
					        no-item-selected-title="@Localizer["PickerNoItemSelectedTitle"].Value" 
					        show-all-items-title="@Localizer["PickerShowAllItemsTitle"].Value"
					        item-already-selected-title="@Localizer["PickerItemAlreadySelectedTitle"].Value">
					</picker>
				</div>
			</div>

			<!--Button-->
			<div class="form-group row">
				<label class="col-sm-3 col-form-label">
				</label>
				<div class="col-sm-9">
					<button type="submit" id="api-scope-save-button" class="btn btn-primary">@Localizer["ButtonAddApiScope"]</button>
				</div>
			</div>
		</div>
	</div>

</form>

@section scripts
	{
	<script>
		$(function () {
			//Disable enter for this form
			FormMvc.disableEnter($('#api-scope-form'));
		});
	</script>
}